<template>
  <view class="container">
    <view class="content">
      <!-- 左侧：会员信息和搜索 -->
      <view class="left-side">
        <view class="search-box">
          <input type="text" placeholder="[F2]刷卡或输入卡号" class="search-input" v-model="card_number" />
          <button class="search-button" size="mini" @click="search">搜索</button>
        </view>
        <view class="form">
			<view class="form-group">
			  <label>会员信息：</label>
			  <text style="color: red;">用户名：{{menbers.name}}&nbsp;&nbsp;余额：{{menbers.account_balance}}&nbsp;&nbsp;电话：{{menbers.phone}}</text>
			</view>
			
          <view class="form-group">
            <label>充值金额：</label>
            <input type="number" v-model="chargeAmount" class="search-input" />
          </view>

          <view class="form-group">
            <label>优惠活动：</label>
            <select v-model="promotion" class="search-input">
              <option value="default">暂无优惠活动</option>
            </select>
          </view>
          <view class="form-group">
            <label>赠送金额：</label>
            <input type="number" v-model="bonusAmount" class="search-input" />
          </view>
          <view class="form-group">
            <label>获得积分：</label>
            <input type="number" v-model="points" class="search-input" />
          </view>
          <view class="button-group">
            <button class="clear-button" size="mini" @click="clear">清空[Del]</button>
            <button class="charge-button" size="mini" @click="charge">充值</button>
          </view>
        </view>
      </view>

      <!-- 右侧：充值记录 -->
      <view class="right-side">
        <view class="title">充值记录</view>
        <table class="table">
          <thead>
            <tr>
              <th>订单编号</th>
              <th>会员卡号</th>
              <th>充值时间</th>
              <th>充值金额</th>
              <th>赠送金额</th>
              <th>到账金额</th>
              <th>门店名称</th>
              <th>备注</th>
              <!-- <th>操作</th> -->
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in records" :key="record.id">
              <td>{{ record.order_number }}</td>
              <td>{{ record.card_number }}</td>
              <td>{{ record.charge_time }}</td>
              <td>{{ record.charge_amount }}</td>
              <td>{{ record.bonus_amount }}</td>
              <td>{{ record.received_amount }}</td>
              <td>{{ record.store_name }}</td>
              <td>{{ record.note }}</td>
              <!-- <td><button @click="deleteRecord(record.id)">删</button></td> -->
            </tr>
            <tr v-if="records.length === 0">
              <td colspan="10" class="no-data">无数据</td>
            </tr>
          </tbody>
        </table>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card_number: "",
      chargeAmount: 0,
      promotion: "default",
      bonusAmount: 0,
      points: 0,
      records: [],
	  userInfo: {},
	  menbers:{}
    };
  },
  methods: {
    async search() {
      // 实现搜索逻辑
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/search_user',
        data: {
          "card_number": this.card_number,
        },
      });

      if (res.data.code == 200) {
		this.menbers=res.data.date;  
        uni.showToast({
          title: res.data.info,
          duration: 5000,
          icon: 'success'
        });
        this.getRecords(); // 搜索成功后获取充值记录
      } else {
        uni.showToast({
          title: res.data.info,
          duration: 3000,
          icon: 'error'
        });
      }
    },
    clear() {
      this.chargeAmount = 0;
      this.promotion = "default";
      this.bonusAmount = 0;
      this.points = 0;
    },
    async charge() {

      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/charge_user',
        data: {
          "card_number": this.card_number,
          "chargeAmount": this.chargeAmount,
          "bonusAmount": this.bonusAmount,
          "points": this.points,
          "payment_method":"1",
		      "shop_id": this.userInfo.shop_id,
        },
      });

      if (res.data.code == 200) {
		this.search();
        this.clear();
      }
    },
    async getRecords() {
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/get_records',
        data: {
          "card_number": this.card_number,
		  "shop_id": this.userInfo.shop_id,
        },
      });

      if (res.data.code == 200) {
        this.records = res.data.records;
      } else {
        this.records = [];
      }
    },
	//检查是不是登录
	checkLoginStatus() {
	  const token = uni.getStorageSync('token');
			
	  if (token) {
	    this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
	  } else {
	    this.userInfo = {};
	    this.$router.push('/pages/login/login');
	  }
	},
    async deleteRecord(id) {
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/delete_record',
        data: {
          "id": id,
        },
      });

      if (res.data.code == 200) {
        this.records = this.records.filter(record => record.id !== id);
        uni.showToast({
          title: res.data.info,
          duration: 3000,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: res.data.info,
          duration: 3000,
          icon: 'none'
        });
      }
    }
  },
  created() {
    this.checkLoginStatus();
  },
};
</script>

<style>
  .container {
    display: flex;
    height: 100%;
    padding: 20px;
    background-color: #f5f5f5;
  }

  .content {
    display: flex;
    flex: 1;
  }

  .left-side {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    box-sizing: border-box;
  }

  .right-side {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }

  .search-box {
    display: flex;
    margin-bottom: 20px;
  }

  .search-input {
    flex: 1;
    padding: 13px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
  }

  .search-button {
    background-color: #4cd964;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
  }

  .search-button:hover {
    background-color: #45c853;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    color: #666;
  }

  .input-field {
    width: 100%;

    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
  }

  .clear-button,
  .charge-button {
    background-color: #4cd964;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    flex: 1;
    margin: 5px;
  }

  .clear-button:hover,
  .charge-button:hover {
    background-color: #45c853;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
  }

  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }

  .no-data {
    text-align: center;
    color: #999;
    padding: 20px 0;
  }
</style>
